<!--
 * @Descripttion: 
 * @version: 0.0.1
 * @Author: zhu_liangyu
 * @Date: 2020-10-29 16:25:59
 * @LastEditors: zhu_liangyu
 * @LastEditTime: 2020-11-13 14:56:22
-->
<template>
  <a-card
    class="wish-design-dashboard-analysis-chartCard"
    :bordered="cardBordered"
    :loading="loading"
  >
    <div class="wish-design-dashboard-analysis-chartCard-top">
      <div class="wish-design-dashboard-analysis-chartCard-top-metaWarp">
        <div class="wish-design-dashboard-analysis-chartCard-top-meta">
          <span>{{ title }}</span>
          <div class="wish-design-dashboard-analysis-chartCard-top-action">
            <a-tooltip placement="top">
              <template v-slot:title>
                <span>{{ tooltipTxt }}</span>
              </template>
              <InfoCircleOutlined />
            </a-tooltip>
          </div>
        </div>
        <div class="wish-design-dashboard-analysis-chartCard-top-total">
          {{ total }}
        </div>
      </div>
    </div>
    <div class="wish-design-dashboard-analysis-chartCard-content">
      <slot name="content"></slot>
    </div>
    <div
      v-show="isShowFooter"
      class="wish-design-dashboard-analysis-chartCard-footer"
    >
      <slot name="footer">
        <div
          v-for="(item, index) in footerArr"
          :key="index"
          class="wish-design-dashboard-analysis-chartCard-footer-field"
        >
          <span
            class="wish-design-dashboard-analysis-chartCard-footer-field-label"
          >
            {{ item.label }}
          </span>
          <span
            class="wish-design-dashboard-analysis-chartCard-footer-field-value"
          >
            {{ item.value }}
          </span>
        </div>
      </slot>
    </div>
  </a-card>
</template>
<script lang="ts">
import { computed, inject, ref } from "vue";
import { InfoCircleOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
export default {
  name: "ChartCard",
  components: {
    InfoCircleOutlined,
  },
  props: {
    title: String, //标题
    tooltipTxt: {
      type: String,
    },
    total: String, //总数
    footerData: [Array], //key=>label value
    showFooter: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: true,
    },
  },
  setup(prop) {
    const { t } = useI18n();
    const tooltipTxt = prop.tooltipTxt || t("dashboard.analysis.indexDesc");
    var cardBordered = inject("cardBordered");
    const footerArr = ref([]);
    if (prop.footerData) footerArr.value = prop.footerData as any;
    const isShowFooter = computed(() => {
      return prop.showFooter && footerArr.value.length > 0;
    });
    return {
      tooltipTxt,
      cardBordered,
      footerArr,
      isShowFooter,
    };
  },
};
</script>

<style lang="less" scoped>
.wish-design-dashboard-analysis-chartCard {
  position: relative;
}

.wish-design-dashboard-analysis-chartCard ::v-deep(.ant-card-body) {
  padding: 20px 24px 8px;
}

.wish-design-dashboard-analysis-chartCard-top {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wish-design-dashboard-analysis-chartCard-top-metaWarp {
  float: left;
}
.wish-design-dashboard-analysis-chartCard-top-meta {
  height: 22px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
  span {
    float: left;
  }
}
.wish-design-dashboard-analysis-chartCard-top-action {
  position: absolute;
  top: 4px;
  right: 0;
  line-height: 1;
  cursor: pointer;
}

.wish-design-dashboard-analysis-chartCard-top-total {
  height: 38px;
  margin-top: 4px;
  margin-bottom: 0;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.85);
  font-size: 30px;
  line-height: 38px;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.wish-design-dashboard-analysis-chartCard-content {
  height: 46px;
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.wish-design-dashboard-analysis-chartCard-footer {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid #f0f0f0;
}

.wish-design-dashboard-analysis-chartCard-footer-field {
  float: left;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.wish-design-dashboard-analysis-chartCard-footer-field-label,
.wish-design-dashboard-analysis-chartCard-footer-field-value {
  font-size: 14px;
  line-height: 22px;
}

.wish-design-dashboard-analysis-chartCard-footer-field-value {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.85);
}
</style>